<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>index.html</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link href="/assets/styles.css" rel="stylesheet" media="screen">
</head>

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span
                        class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">PCZ平台管理工具</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a id="logout" href=""> <i class="icon-user"></i> 退出登录 <i></i></a></li>
                    </ul>

                    <ul id="myTab" class="nav nav-tabs">
                        <li id="serv1" class="active"><a href="" data-toggle="tab">内网测试</a></li>
                        <li id="serv2"><a href="" data-toggle="tab">内网正式</a></li>
                        <li id="serv3"><a href="" data-toggle="tab">外网测试</a></li>
                        <li id="serv4"><a href="" data-toggle="tab">外网正式</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3" id="sidebar">
                <ul id="side" class="nav nav-list bs-docs-sidenav nav-collapse collapse">
                </ul>
            </div>

            <div class="span9" id="content">
                <form role="form">
                    <div class="form-group" id="texts">
                    </div>
                </form>
                <button id="but" class="btn btn-lg btn-primary btn-block" type="submit">提交</button>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    function textAdd(obj) {
        document.getElementById("texts").innerHTML = "";
        var input = document.createElement("input");
        input.id = "gmtype";
        input.setAttribute('type', 'text');
        input.setAttribute('value', obj.type);
        input.setAttribute('readonly', true);
        document.getElementById("texts").append(input);
        for (let key in obj) {
            if (key == 'type') continue;
            var label = document.createElement("label");
            label.setAttribute("for", "name");
            label.innerHTML = key;
            var text = document.createElement("textarea");
            text.id = key;
            text.setAttribute("class", "form_control");
            text.setAttribute("style", "width: 810px");
            text.setAttribute("rows", 1);
            document.getElementById("texts").append(label);
            document.getElementById("texts").append(text);
        }
    }
    function sideClick(obj) {
        $("#but").removeAttr("disabled");
        var list = {};
        list.id = obj.id;
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: "index/gm",
            data: JSON.stringify(list),
            success: function (result) {
                let obj = JSON.parse(result);
                textAdd(obj);
            },
            error: function (e) {
                alert("error");
            }
        });
    }
    function sideAdd(id, text) {
        var li = document.createElement("li");
        var a = document.createElement("a");
        a.id = "gm" + id;
        a.setAttribute("onclick", "sideClick(this)");
        a.innerHTML = id + ". " + text;
        li.appendChild(a);
        document.getElementById("side").appendChild(li);
    }
    function initPost() {
        var list = {};
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: "index",
            data: JSON.stringify(list),
            success: function (result) {
                let obj = JSON.parse(result);
                for (let id in obj) {
                    sideAdd(id, obj[id]);
                }
                count = Object.keys(obj).length;
            },
            error: function (e) {
                alert("error");
            }
        });
    }
    function logout() {
        $("#logout").click(function () {
            var list = {};
            $.ajax({
                type: "get",
                contentType: "application/json;charset=UTF-8",
                url: "logout",
                data: JSON.stringify(list),
                success: function (result) {
                    window.location.href = "/";
                },
                error: function (e) {
                    window.location.href = "/";
                }
            });
        });
    }
    function buttonClick() {
        $("#but").click(function () {
            console.log("index button Click");
            //请求参数
            var list = {};
            var mark = false;

            list.type = $("#gmtype").attr('value');
            if (!list.type) mark = true;
            $("textarea").each(function () {
                let id = $(this).attr('id');
                let val = $(this).val();
                if (!id) {
                    mark = true;
                    return;
                };
                list[id] = val || "";
            });
            var servChoose = false;
            for (var i = 1; i <= 4; ++i) {
                var serv = '#serv' + i;
                let active = $(serv).attr('class');
                if (active) {
                    servChoose = true;
                    list.server = i;
                    break;
                }
            }
            if (!servChoose) {
                alert('choose serv');
                return false;
            }
            if (mark) {
                alert('id error');
                return false;
            }

            console.log("ajax");
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                url: "/index/commit",
                data: JSON.stringify(list),
                success: function (result) {
                    //document.getElementById("texts").innerHTML = "";
                    $("#but").attr("disabled", "disabled");
                    window.setTimeout(function () {
                        $("#but").removeAttr("disabled");
                    }, 5000);
                },
                error: function (e) {
                    alert("Commit error");
                }
            });

        });
    }

    $(document).ready(function () {
        initPost();
        logout();
        buttonClick();
    });
</script>